<template>
	<div class="icons">
	  <swiper>
	   	<swiper-slide v-for="(page,index) of pages" :key="index">
			<div class="icon" v-for="icon of page" :key="icon.id">
				<div class="icon-img">
					<img class="icon-img-content" :src="icon.iconUrl">
				</div>
					<p class="icon-text">{{ icon.name }}</p>
			</div>
	    </swiper-slide>
	  </swiper>
	</div>
</template>

<script>
	export default {
		name:'HomeIcons',
		data () {
			return {
				
				iconList:[{
					id:'0001',
					name:'绝地求生',
					iconUrl:'https://huyaimg.msstatic.com/cdnimage/game/2793-MS.jpg'
				},{
					id:'0002',
					name:'我的世界',
					iconUrl:'https://huyaimg.msstatic.com/cdnimage/game/1732-MS.jpg'
				},{
					id:'0003',
					name:'方舟',
					iconUrl:'https://huyaimg.msstatic.com/cdnimage/game/1997-MS.jpg'
				},{
					id:'0004',
					name:'刺客信条',
					iconUrl:'https://huyaimg.msstatic.com/cdnimage/game/1962-MS.jpg'
				},{
					id:'0005',
					name:'泰坦陨落',
					iconUrl:'https://huyaimg.msstatic.com/cdnimage/game/1446-MS.jpg'
				},{
					id:'0006',
					name:'主机游戏',
					iconUrl:'https://huyaimg.msstatic.com/cdnimage/game/100032-MS.jpg'
				},{
					id:'0007',
					name:'古墓丽影',
					iconUrl:'https://huyaimg.msstatic.com/cdnimage/game/2252-MS.jpg'
				},{
					id:'0008',
					name:'中国式家长',
					iconUrl:'https://huyaimg.msstatic.com/cdnimage/game/4361-MS.jpg'
				},{
					id:'0009',
					name:'战地5',
					iconUrl:'https://huyaimg.msstatic.com/cdnimage/game/4371-MS.jpg'
				},{
					id:'0010',
					name:'无主之地3',
					iconUrl:'https://huyaimg.msstatic.com/cdnimage/game/4713-MS.jpg'
				}
				

				]
			}
		},
		computed: {
			pages () {
				const pages = []
				this.iconList.forEach((item,index) => {
					const page = Math.floor(index / 8)
					if (!pages[page]) {
						pages[page] = []
					}
					pages[page].push(item)
				})
				return pages
			}
		}
	}
</script>

<style lang="stylus" scoped>
	@import '~styles/maxlength.styl'
	.icons  >>>  .swiper-container
		height:0
		padding-bottom:50%
	.icon
		position:relative
		overflow:hidden
		float:left
		width:25%
		height:0
		padding-bottom:25%
		
		.icon-img
			position:absolute
			top:0
			left:0
			right:0
			bottom:.44rem
			box-sizing:border-box
			padding:.1rem
			
			.icon-img-content
				display:block
				margin:0 auto
				height:100%

		.icon-text
			position:absolute
			left:0
			right:0
			bottom:0
			height.44rem
			line-height:.44rem
			color:#333
			text-align:center
			ellipsis()

</style>